<!-- 左侧工具条：源码模块 -->
<template>
    <div class="sourceCode">
        <monacoEditor v-model="data.sourceCode" :readOnly="true" valueFormat="json" :lineNumbers="false" language="json"
            :triggerChange="false"></monacoEditor>
    </div>
</template>

<script setup>
import { reactive, watch } from 'vue'
import monacoEditor from '../../common/extens/monacoEditor/monacoEditor.vue';
import { generateData, fixGenerateData } from '../../pageManager.js'

const data = reactive({
    sourceCode: JSON.parse(JSON.stringify(generateData.data))
})

// 监听数据变化，用于清理数据结构
watch(() => generateData.data, (newValue, oldValue) => {
    data.sourceCode = fixGenerateData(newValue);
}, { deep: true });

</script>

<style lang="less" scoped>
.sourceCode {
    // height: 100%;
    height: calc(100vh - 50px);
}

.coder-editor {
    height: calc(100vh - 50px);
}

.code-wrap {
    font-size: 14px;
}

pre {
    padding: 5px;
    height: calc(100vh - 50px);
}
</style>
